<template>
  <div class="app-container">
    <div class="head-container">
      <label class="el-form-item-label">时间</label>
      <el-date-picker
        v-model="time"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="timestamp"
        class="filter-item"
        @change="transferTime"
      >
      </el-date-picker>
      <label class="el-form-item-label">实验室</label>
      <el-select
        v-model="form.labId"
        style="width: 185px"
        placeholder="实验室"
        class="filter-item"
      >
        <el-option
          v-for="item in labs"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <label class="el-form-item-label">传感器类型</label>
      <el-select
        v-model="form.type"
        style="width: 185px"
        placeholder="传感器类型"
        class="filter-item"
      >
        <el-option value="1" label="温度" />
        <el-option value="2" label="湿度" />
        <el-option value="3" label="压差" />
      </el-select>
      <span>
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          class="filter-item"
          size="mini"
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
          >重置</el-button
        >
      </span>
    </div>
    <div
      id="container"
      style="margin: 20px; width: 1200px; height: 500px"
    ></div>
  </div>
</template>
<script>
// import * as echarts from 'echarts';
import { get } from "@/api/lab";
import { charts } from "@/api/sensorLog";
const echarts = require("echarts");

export default {
  data() {
    return {
      form: {
        type: null,
        labId: null,
        startTime: null,
        endTime: null,
      },
      time: "",
      labs: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {},
  created() {
    this.getLabs();
    this.getCharts();
  },
  methods: {
    initEcharts() {
      let arr = [];
      this.sensor.forEach((item, index) => {
        let obj = {
          name: item,
          type: "line",
          smooth: true,
          // stack: "Total",
          data: this.value[index],
        };
        arr.push(obj);
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("container"));
      // 绘制图表
      myChart.setOption(
        {
          animationDuration: 5000,
          title: {
            text: "环境管理统计图",
            // subtext: '温度/湿度/压差',
            top: "auto",
            textStyle: { color: "black" },
          },
          tooltip: {
            trigger: "axis",
            // confine: true,
            formatter: function (params) {
              if (params instanceof Array) {
                let str = "";
                str += `${params[0].axisValue}<br/>`;
                params.forEach((m, index) => {
                  str += `<span class="chart-tooltip-color" style="display: inline-block; margin-right: 10px; background-color: ${m.color}; width: 10px; height: 10px; border-radius:100%; margin-right: 5px"></span>`;
                  str += `${m.seriesName}：${m.data}`;
                  str += `${index % 2 === 0 ? "<br/>" : ""}`; //一排放几个可根据实际情况改变
                });
                return str;
              }
            },
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            type: "scroll",
            orient: "horizontal",
            top: 20,
            data: this.sensor,
          },
          toolbox: {
            showTitle: false,
            feature: {
              saveAsImage: {},
              dataView: {},
              magicType: {
                type: ["bar", "stack"],
              },
              restore: {},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: this.date,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: arr,
        },
        true
      );
    },
    getCharts() {
      charts({type: 1,})
        .then((response) => {
          this.value = [];
          this.sensor = [];
          this.date = [];
          let temp = response.data;
          let temp2 = response.date;
          for (let i in temp) {
            this.value.push(temp[i].data);
            this.sensor.push(temp[i].name);
          }
          for (let i in temp2) {
            this.date.push(temp2[i]);
          }
          this.initEcharts();
        })
        .catch((_) => {
          console.log(this.response);
        });
    },
    search() {
      charts({
        labId: this.form.labId,
        type: this.form.type,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }).then((res) => {
        this.value = [];
        this.sensor = [];
        this.date = [];
        let temp = res.data;
        let temp2 = res.date;
        for (let i in temp) {
          this.value.push(temp[i].data);
          this.sensor.push(temp[i].name);
        }
        for (let i in temp2) {
          this.date.push(temp2[i]);
        }
        this.initEcharts();
      });
    },
    getLabs() {
      get()
        .then((res) => {
          this.labs = res;
        })
        .catch((_) => {
          console.log(res);
        });
    },
    reset() {
      this.form.labId = null;
      this.time = null;
      this.form.type = null;
    },
    transferTime() {
      if (this.time != null) {
        this.form.startTime = this.time[0];
        this.form.endTime = this.time[1];
      }
    },
  },
};
</script>

<style>
.el-range-editor--small .el-range-separator {
  line-height: 25px;
  font-size: 13px;
}
.label {
  margin: 0 3px 9px 0;
  display: inline-block;
  text-align: right;
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 30.5px;
  padding: 0 7px 0 7px;
}
</style>
